<template>
    <div class="teacherLecture common">
        <innerCommon
            :location="location"
        >
            <template slot="left">
                <span>直播列表</span>
                <a-input-search class="inputStyle" placeholder="搜索标题" enter-button @search="onSearch" v-model="searchValue"/>
            </template>
            <div slot="right">
                <a-button type="primary" @click="add()">新增</a-button>
            </div>
            <div slot="table">
                <a-table 
                    size="middle"
                    :columns="columns" 
                    :data-source="list" 
                    :pagination="pagination"
                    :rowKey="record=>record.id"
                    @change="changePage"
                    :locale="{'emptyText': '暂无数据'}"
                    bordered>
                    <div slot="status" slot-scope="index,record" class="status">
                        <span v-if="record.status==1" class="playing">进行中</span>
                        <span v-else-if="record.status==0" class="prePlay">未开始</span>
                        <span v-else class="played">已结束</span>
                    </div>
                    <div slot="action" slot-scope="index,record" class="tableAction">
                        <span @click="editTea(record)">修改</span>
                        <confirmBox
                            @handleOk="deleteTea(record)"
                            :typeName="'删除'"
                            :noticeInfo="record.title"
                            :noticeType="'直播'"
                        ></confirmBox>
                        <confirmBox
                            @handleOk="stayAtTop(record)"
                            :typeName="record.stayAtTop==0?'置顶':'取消置顶'"
                        ></confirmBox>
                    </div>
                </a-table>
            </div>
        </innerCommon>
    </div>
</template>
<script>
import {getTeacherLectureSearchApi,deleteTeacherLectureApi,stayAtTopApi} from "@/request/api"
import innerCommon from "@/components/common/innerCommon"
import confirmBox from "@/components/common/confirmBox"
const columns=[
    {
        title: '序号',
        dataIndex: 'index',
        width:70
    },{
        title: '直播标题',
        dataIndex: 'title',
        width:200
    },{
        title: '主讲人',
        dataIndex: 'teacher',
        width:100
    },{
        title: '开始时间',
        dataIndex: 'startTime',
        width:200
    },{
        title: '结束时间',
        dataIndex: 'endTime',
        width:200
    },{
        title: '直播地址',
        dataIndex: 'url',
        width:120
    },{
        title: '回放地址',
        dataIndex: 'playback',
        width:120
    },{
        title: '直播状态',
        scopedSlots: { customRender: 'status' },
        width:120
    },{
        title: '操作',
        scopedSlots: { customRender: 'action' },
        width:220
    },

]
export default {
    name:'teacherLecture',
    components:{innerCommon,confirmBox},
    watch:{
        searchValue:function(val){
            this.searchValue=val.trim()
        }
    },
    mounted(){
        this.location=[{
            name:'信息发布管理',
            path:''
        },{
            name:'名师讲堂',
            path:'/teacherLecture'
        }]
        this.init()
    },
    data(){
        return{
            location:[],
            columns,
            list:[],
            searchInfo:{
                page:1,
                pageSize:10,
                keyword:''
            },
            pagination:{pageSize:10,total:0,current:1},
            searchValue:''
        }
    },
    methods:{
        init(){
            this.dealData(getTeacherLectureSearchApi)
        },
        changePage(data){
            this.searchInfo.page=data.current
            this.pagination.current=data.current
            this.init()
        },
        onSearch(data){
            this.searchInfo.keyword=data.trim()
            this.changePage({current:1})
        },
        dealData(api){
            this.getToken(api,this.searchInfo,res=>{
                this.pagination.total=res.data.count
                this.list=res.data.rows.map((item,index)=>({...item,index:(this.searchInfo.page-1)*10+index+1}))
            })
        },
        
        add(){
            this.$router.push({path:'/teacherLectureAdd'})
        },
        editTea(data){
            this.$router.push({path:'/teacherLectureAdd',query:{info:JSON.stringify(data.id)}})
        },
        deleteTea(data){
            this.getToken(deleteTeacherLectureApi,{'lectureId':data.id},res=>{
                this.$message.success(res.message)
                this.init()
            })
        },
        stayAtTop(data){
            this.getToken(stayAtTopApi,{'lectureId':data.id,'stayAtTop':data.stayAtTop==0?1:0},res=>{
                this.$message.success(res.message)
                this.init()
            })
        }
    }
}
</script>
<style lang="stylus">
.ant-breadcrumb-link
    cursor pointer
</style>
<style lang="stylus" scoped>
.teacherLecture
    .status
        .playing
            color:green
        .prePlay
            color:red
        .played
            color:gray
</style>